<template>
	<view class="uploader-container flex wrap">
		<u-upload-adj @on-change="change" :action="action" :header="{'token': token,'version': version}"
			:deletable="deletable" :max-count="maxUpload" :showProgress="showProgress" @on-remove="remove"
			:multiple="mutiple" :custom-btn="true" :width="previewSize" :height="previewSize" :maxSize="maxSize"
			ref="upload">
			<view slot="addBtn" class="uplader-upload" hover-class="slot-btn__hover" hover-stay-time="150">
				<u-icon size="48" color="#dcdee0" name="camera" />
				<view class="xs">
					{{fileList.length>=1?fileList.length+'/'+maxUpload:$zhTran(tips)}}
				</view>
			</view>
		</u-upload-adj>
	</view>
</template>

<script>
	import store from '@/store'
	import {
		baseURL,
		version
	} from '@/config/app.js'
	export default {
		name: "uploader",
		props: {
			// 默认不允许多选文件
			mutiple: {
				type: Boolean,
				default: false
			},
			// 限制上传文件数量
			maxUpload: {
				type: Number,
				default: 1
			},
			// upload大小
			previewSize: {
				type: String,
				default: "160"
			},
			// 是否可删除
			deletable: {
				type: Boolean,
				default: true,
			},
			// 提示
			tips: {
				type: String,
				default: '上传文件'
			},
			// 是否显示进度条
			showProgress: {
				type: Boolean,
				default: false,
			},
			// 文件大小限制，单位为byte
			maxSize: {
				type: [String, Number],
				default: Number.MAX_VALUE
			},
			// 是否上传临时文件
			isTemp: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				action: '',
				token: '',
				fileList: [],
				version: version
			}
		},
		mounted() {
			console.log(store.getters.token, baseURL)
			this.action = baseURL + (this.isTemp ? '/shopapi/upload/tempAdj' : '/shopapi/upload/file');
			this.token = store.getters.token
		},
		methods: {
			// 上传，不管成不成功都返回数据｜提示
			change(event) {
				this.$toast({
					title: event.msg
				})

				if (event.code == 1) {
					console.log('event', event.data)
					this.fileList.push({
						url: event.data.url,
						icon: event.data.icon,
						name: event.data.realname
					})
					this.$emit('input', this.fileList)
				}
			},

			// 删除一个文件
			remove(event) {
				this.fileList.splice(event, 1);
				this.$emit('input', this.fileList)
			}
		}
	}
</script>

<style lang="scss">
	.uploader-container {
		.uplader-upload {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			padding-top: 30rpx;
			text-align: center;
			margin: 11rpx;
			border: 2px dashed #e5e5e5;
			background-color: #FFFFFF;

			>view {
				color: #BBB;
			}
		}
	}
</style>